<template>
  <div id="dashborad"  style="height: 100%;">
     <el-row :gutter="5" style="margin-top: 5px; margin-right: 5px; margin-left: 5px;">
      <el-col :span="6">
        <el-card class="box-card">
          <template #header>
            <div class="card-header" style="height: 10px">
                <span style="font-size: 15px; position: absolute; top: 15px;">Node状态</span>
            </div>
          </template>
          <div style="display: flex;justify-content: space-between">
           <el-progress type="dashboard" :percentage="status_percent" :color="colors" />
           <div style="display: flex; flex-direction: column; align-items: flex-end;">
              <span style="font-size: 15px; margin-right: 30px;margin-top: 30px;">准备就绪/总数</span>
              <span style="font-size: 30px; margin-top: 20px; margin-right: 60px;">{{status_ok}}/{{node_total}}</span>
           </div>
           </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="box-card">
          <template #header>
            <div class="card-header" style="height: 10px">
                <span style="font-size: 15px; position: absolute; top: 15px;">Node调度</span>
            </div>
          </template>
          <div style="display: flex;justify-content: space-between">
           <el-progress type="dashboard" :percentage="schedulable_percent" :color="colors" />
             <div style="display: flex; flex-direction: column; align-items: flex-end;">
                <span style="font-size: 15px;margin-right: 30px;margin-top: 30px;">可调度/总数</span>
                <span style="font-size: 30px; margin-top: 20px; margin-right: 50px;">{{schedulable_ok}}/{{node_total}}</span>
             </div>
           </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="box-card">
          <template #header>
            <div class="card-header" style="height: 10px">
                <span style="font-size: 15px; position: absolute; top: 15px;">CPU使用</span>
            </div>
          </template>
          <div style="display: flex;justify-content: space-between">
           <el-progress type="dashboard" :percentage="cpu_percent" :color="colors2" />
           <div style="display: flex; flex-direction: column; align-items: flex-end;">
              <span style="font-size: 15px; margin-right: 30px;margin-top: 30px;">已分配/可分配</span>
              <span style="font-size: 30px; margin-top: 20px; margin-right: 35px;">{{cpu_requests}}C/{{allocatable_cpu}}C</span>
            </div>
           </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="box-card">
          <template #header>
            <div class="card-header" style="height: 10px">
                <span style="font-size: 15px; position: absolute; top: 15px;">内存使用</span>
            </div>
          </template>
          <div style="display: flex;justify-content: space-between">
           <el-progress type="dashboard" :percentage="memory_percent" :color="colors2" />
            <div style="display: flex; flex-direction: column; align-items: flex-end;">
              <span style="font-size: 15px; margin-right: 30px;margin-top: 30px;">已分配/可分配</span>
              <span style="font-size: 30px; margin-top: 20px;">{{memory_requests}}G/{{allocatable_memory}}G</span>
            </div>
            </div>
        </el-card>
      </el-col>
     </el-row>
     <el-row :gutter="5" style="margin-top: 5px; margin-right: 5px; margin-left: 5px;">
      <el-col :span="12">
        <el-card class="box-card">
          <template #header>
            <div class="card-header" style="height: 10px">
                <span style="font-size: 15px; position: absolute; top: 15px;">节点资源</span>
            </div>
          </template>
          <div style="height: 400px;overflow: auto">
            <el-row :gutter="5" style="margin-top: 5px; margin-right: 5px; margin-left: 5px;">
              <el-col :span="24">
                <el-card class="box-card" v-for="(value,key,index) in node_resource" :key="key" style="margin-top: 5px;">
                    <template #header>
                      <div class="card-header" >
                          <span style="font-size: 15px;">{{ key }}</span>
                      </div>
                    </template>
                    <span>CPU: <el-tag type="warning">已分配{{value.cpu_requests}}核</el-tag> / <el-tag type="success">可分配{{value.allocatable_cpu}}核</el-tag> / <el-tag type="primary">总量{{value.capacity_cpu}}核</el-tag></span><br>
                    <span>内存: <el-tag type="warning">已分配{{value.memory_requests}}G</el-tag> / <el-tag type="success">可分配{{value.allocatable_memory}}G</el-tag> / <el-tag type="primary">总量{{value.capacity_memory}}G</el-tag></span><br>
                    <span>短暂存储: <el-tag type="success">已分配{{value.allocatable_ephemeral_storage}}G</el-tag> / <el-tag type="primary">总量{{value.capacity_ephemeral_storage}}G</el-tag></span><br>
                    <span>Pod数量: <el-tag type="success">已创建{{value.pods_number}}个</el-tag> / <el-tag type="primary">总量{{value.capacity_pods}}个</el-tag></span>
                </el-card>
              </el-col>

            </el-row>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="box-card">
          <template #header>
            <div class="card-header" style="height: 10px">
                <span style="font-size: 15px; position: absolute; top: 15px;">存储资源</span>
            </div>
          </template>
          <div style="height: 400px;overflow: auto">
            <el-row :gutter="5" style="margin-top: 5px; margin-right: 5px; margin-left: 5px;">
              <el-col :span="24">
                <el-card class="box-card" v-for="(key,index) in pv_resource" :key="key" style="margin-top: 5px;">
                    <template #header>
                      <div class="card-header" >
                          <span style="font-size: 15px;">{{ key.pv_name }}</span>
                      </div>
                    </template>
                    <span>卷申请:  <el-tag type="warning">{{key.claim}}</el-tag></span><br>
                    <span>容量状态: <el-tag type="success">{{key.capacity}}</el-tag> / <el-tag type="success">{{key.status}}</el-tag></span><br>
                    <span>存储策略:
                      <template v-for="(key,index) in key.access_modes">
                        <el-tag type="success">{{key}}</el-tag>
                      </template>
                    </span><br>
                    <span>创建时间: <el-tag type="primary">{{key.create_time}}</el-tag></span>
                </el-card>
              </el-col>

            </el-row>
          </div>
        </el-card>
      </el-col>
    </el-row>
     <el-row :gutter="5" style="margin-top: 5px; margin-right: 5px; margin-left: 5px;">
      <el-col :span="24">
        <el-card class="box-card">
          <template #header>
            <div class="card-header" style="height: 10px">
                <span style="font-size: 15px; position: absolute; top: 15px;">Pod数量统计</span>
            </div>
          </template>
           <div ref="podChart" style="width: 100%; height: 300px;"></div>
        </el-card>
      </el-col>
     </el-row>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';
import requestUtil from "@/util/request";
import {ElMessage} from "element-plus";

//计算资源
const allocatable_cpu = ref(0)
const allocatable_memory = ref(0)
const cpu_requests = ref(0)
const memory_requests = ref(0)
const schedulable_ok = ref(0)
const schedulable_no = ref(0)
const status_ok = ref(0)
const status_no = ref(0)

const cpu_percent = ref(0)
const memory_percent = ref(0)
const node_total = ref(0)
const status_percent = ref(0)
const schedulable_percent = ref(0)

const colors = [
  { color: '#f56c6c', percentage: 20 },
  { color: '#6f7ad3', percentage: 40 },
  { color: '#1989fa', percentage: 60 },
  { color: '#e6a23c', percentage: 80 },
  { color: '#5cb87a', percentage: 100 },
]

const colors2 = [
  { color: '#5cb87a', percentage: 20 },
  { color: '#6f7ad3', percentage: 40 },
  { color: '#1989fa', percentage: 60 },
  { color: '#e6a23c', percentage: 80 },
  { color: '#f56c6c', percentage: 100 },
]

//节点资源
const node_resource = ref(null)
//存储资源
const pv_resource = ref(null)
//pod资源统计
const podChart = ref(null)
const namespace_data = ref([])
const pod_data = ref([])

const init = async () => {
   const res=await requestUtil.get("k8s/node_resource")
   node_resource.value = res.data.data
   for (let key in res.data.data){
       allocatable_cpu.value += res.data.data[key].allocatable_cpu;
       allocatable_memory.value += res.data.data[key].allocatable_memory;
       cpu_requests.value += res.data.data[key].cpu_requests;
       memory_requests.value += res.data.data[key].memory_requests;

       if (res.data.data[key].schedulable) {   // 布尔值判断，值是null或者true
           schedulable_no.value  += 1
       } else {
           schedulable_ok.value += 1
       }

       if (res.data.data[key].status) {
           status_ok.value  += 1
       } else {
           status_no.value += 1
       }
  }
   cpu_percent.value = Math.round(100 * cpu_requests.value / allocatable_cpu.value);
   memory_percent.value = Math.round(100 * memory_requests.value / allocatable_memory.value);
   node_total.value = (status_ok.value+status_no.value);
   status_percent.value = Math.round(100 * status_ok.value / node_total.value);
   schedulable_percent.value = Math.round(100 * schedulable_ok.value / node_total.value);
}

const initpv = async () => {
   const res=await requestUtil.get("k8s/pv_resource")
   pv_resource.value = res.data.data
}

const podInitChart = () => {
    const Chart = echarts.init(podChart.value);
    const option = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: [
        {
          type: 'category',
          data:  namespace_data.value,
          axisTick: {
            alignWithLabel: true
          },
          axisLabel: {
            // color: '#A1A7B3',
            interval: 0, // 横轴信息全部显示，默认显示一半
            width: 60, //x轴每个命名空间宽度固定
            overflow: 'truncate', //超出部分截断
            truncate: '...' //截断部分用...表示
          },
        }
      ],
      yAxis: [
        {
          type: 'value'
        }
      ],
      series: [
        {
          name: 'Pod数量',
          type: 'bar',
          barWidth: '60%',
          data: pod_data.value
        }
      ]
    };
    Chart.setOption(option); // 使用刚指定的配置项和数据显示图表。
}

const initpod = async () => {
   namespace_data.value = []
   pod_data.value = []
   const res=await requestUtil.get("k8s/namespace_pod_api")
   namespace_data.value = res.data.namespace_data
   pod_data.value = res.data.pod_data
   if (namespace_data.value && pod_data.value){
      podInitChart()
   }
}

// 在 onMounted 生命周期钩子中初始化 ECharts 实例
onMounted(() => {
    init()
    initpv()
    initpod()
});



</script>

<style lang="scss" scoped>

</style>
